<template>
  <div class="content">
    <div class="login-form">
      <form @submit="formSubmit" class="form">
        <view class="uni-form-item uni-column">
          <view class="title"></view>
          <input
            class="uni-input"
            name="input"
            placeholder="账号"
            v-model="account"
          />
        </view>
        <view class="uni-form-item uni-column ps">
          <view class="title"></view>
          <input
          style="height: 20px;width: 99.6%;background-color: rgba(255, 255, 255, 0);font-size:16px"
            class="uni-input "
            name="input"
            placeholder="密码"
            v-model="passwd"
            :type="showPassword ? 'password' : 'text'"
          />
          <view class="eye-icon" @click="toggleShowPassword">
            <image src="/static/eye.png" class="eye-image"></image>
          </view>
        </view>
        <view class="btn">
          <button form-type="submit">登录</button>
        </view>
      </form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      account: "",
      passwd: "",
      showPassword: true,
    };
  },
  methods: {
    formSubmit(e) {
      console.log(e, "e");
      uni.request({
        url: "http://121.229.186.197:18858/tzapi/sys/login/passport",
        method: "POST",
        data: { account: this.account, passwd: this.passwd },
        success: (res) => {
          if (res.data.data) {
            uni.navigateTo({
              url: "/pages/index/index1",
            });
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: "none",
              duration: 2000,
            });
          }
        },
      });
    },
    toggleShowPassword() {
      console.log(this.passwd)
      this.showPassword = !this.showPassword;
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 100vw;
  height: 100vh;
  background: url("@/static/login-bg.png") no-repeat;
  background-size: 100% 100%;
  .login-form {
    padding: 13rem 3rem;
  }
  .uni-input {
    border: 1px solid #beddfe;
    width: 100%;
    padding: 2px 3px;
    // border-radius: 5px;
    margin-bottom: 10px;
  }
  
  button {
    background: #4a7aad;
    line-height: 35px;
    padding: 0px;
    font-size: 16px;
    color: #fff;
    margin-top: 30px;
  }
  .eye-image{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 3px;
    right: 10px;
  }
  .ps{
    position: relative;
    width: 100%;
    
  }
}
</style>
